<template>
  <div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <basic-opt :has_left="true">
      <template #search>
        <div class="opt-item">
         <address-name :address_name="address_name" @getAddress="getAddress"></address-name>
        </div>
      </template>
      <template #add>
        <div class="opt-item">
          <el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">添加房间</el-button>
        </div>
      </template>
    </basic-opt>

    <div class="table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
        <el-table-column prop="guid" label="ID"></el-table-column>
        <el-table-column prop="door_number" label="房门号"></el-table-column>
        <el-table-column prop="room_address" label="标准地址"></el-table-column>
        <el-table-column fixed="right" label="操作" width="400px">
          <template #default="scope">
            <el-button @click="onDelData(scope.row)" type="danger" plain size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加房间 -->
    <compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
      <el-form ref="form" :model="form" label-width="120px">
        <el-scrollbar height="80vh" v-loading="form_loading" element-loading-text="正在进行请求,请稍后"
                      element-loading-spinner="el-icon-loading">
          <div v-for="(item,index) in form.rooms" :key="index">
            <div class="form-flex">
              <el-form-item label="房门号">
                <el-input class="w-ipt" v-model="item.door_number" placeholder="请填写房门号"></el-input>
              </el-form-item>
              <el-form-item label="标准地址ID">
                <el-input class="w-ipt" v-model="item.guid" placeholder="请填写房间标准地址ID"></el-input>
              </el-form-item>
              <el-form-item label="标准地址">
                <el-input class="w-ipt" v-model="item.room_address" placeholder="请填写房间标准地址">
                </el-input>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="添加房间操作">
            <el-button size="mini" type="primary" @click="addRoomItem">添加房间</el-button>
            <el-button size="mini" type="danger" @click="delRoomItem">删除房间</el-button>
          </el-form-item>
        </el-scrollbar>
        <submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
        </submit-reset>
      </el-form>
    </compoment-drawer>

    <!-- 删除数据确认 -->
    <delete-data :del_data_dialog="del_data_dialog" @getDelData="getDelData" @getCancelDelData="getCancelDelData">
      <el-descriptions class="margin-top" :column="1" size="medium" border>
        <el-descriptions-item>
          <template #label>
            id
          </template>
          {{ delData.guid }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            房门号
          </template>
          {{ delData.door_number }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            标准地址
          </template>
          {{ delData.room_address }}
        </el-descriptions-item>
      </el-descriptions>
    </delete-data>
  </div>

  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="mobile-search-box">
      <address-name :address_name="address_name" @getAddress="getAddress"></address-name>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="guid" label="ID"></el-table-column>
        <el-table-column prop="door_number" label="房门号"></el-table-column>
        <el-table-column prop="room_address" label="标准地址"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import API from '@/api/index.js'
import mixin from '@/mixin.js'
import AddressName from '@/components/address/address-name.vue'


export default {
  mixins: [mixin],
  name: 'room',
  components: {
    AddressName
  },
  data() {
    return {
      address_name: '',
      address_id: '', // 固件id

      // 添加房间
      form_loading: false, // 表单填写时加载
      drawer_name: '添加房间',
      form: {
        address_id: '',
        rooms: []
      }

    }
  },
  mounted() {
    this.address_id = localStorage.getItem('address_id') ? Number(localStorage.getItem('address_id')) : '';
    this.address_name = localStorage.getItem('address_name') ? localStorage.getItem('address_name') : '';
    this.form.address_id = localStorage.getItem('address_id') ? Number(localStorage.getItem('address_id')) : '';
    if (this.address_id) {
      this.getData();
    }
    window.location.hash = "#/room?address_id=" + this.address_id;
  },
  methods: {
    async getData() {
      let self = this;
      self.loading = true;
      try {
        let params = {
          address_id: self.address_id ? self.address_id : ''
        }
        self.addPageInfo(params)
        let res = await API.rooms(params.address_id);
        self.loading = false;
        self.onGotPageData(res)
      } catch (err) {
        self.loading = false;
      }
    },
    getAddress(val) {
      let self = this;
      self.initData();
      localStorage.setItem('address_id', val.addressData.id);
      localStorage.setItem('address_name', val.addressData.address);
      self.$nextTick(function () {
        self.address_id = val.addressData.id;
        self.form.address_id = val.addressData.id;
        window.location.hash = "#/room?address_id=" + self.address_id;
        self.getData();
      });
    },
    initData() {
      let self = this;
      self.address_id = '';
      self.form.address_id = '';
      localStorage.removeItem('address_id');
    },

    // 提交表单
    getNewForm() {
      let self = this;
      self.form_loading = true;
      API.room(self.form).then(res => {
        console.log(res)
        self.submitSuccess();
        self.drawer_form = false;
        self.form_loading = false;
        self.getData();
        self.initForm();
      }).catch(err => {
        self.form_loading = false;
        self.$message.error(err.response.data.message);
      });
    },
    // 添加房间
    addRoomItem() {
      let self = this;
      self.form.rooms.push({})
    },
    delRoomItem() {
      let self = this;
      self.form.rooms.pop({})
    },
    // 初始表单
    initForm() {
      let self = this;
      self.form = {
        address_id: localStorage.getItem('address_id') ? Number(localStorage.getItem('address_id')) : '',
        rooms: []
      }
    },

    // 确定删除数据
    submitDeleteData(val) {
      let self = this;
      API.delRoom(val).then(res => {
        console.log(res)
        self.getData();
        self.delSuccess();
      }).catch(err => {
        self.$message.error(err.response.data.message);
      })
    }
  },
  beforeUnmount() {
    localStorage.removeItem('address_name');
    localStorage.removeItem('address_id');
  }
}
</script>

<style scoped lang="scss">

</style>
